<template>
    <el-dialog
        v-model="visible"
        title="咨询费用"
        width="400px"
    >
        <el-form ref="ruleFormRef" label-width="60px" :model="form" :rules="rules" size="small">
            <el-form-item label="时长" prop="time">{{ form.time }}分钟</el-form-item>
            <el-form-item label="单价" prop="single">{{ form.single }}币/分钟</el-form-item>
            <el-form-item label="应付" prop="total">{{ form.total }}/币</el-form-item>
            <el-form-item label="实付" prop="payTotal">
                <el-input v-model="form.payTotal" placeholder="请输入" type="number">
                    <template #append>币</template>
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close" size="small">取消</el-button>
                <el-button type="primary"  size="small" @click="confirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { toRefs, computed, reactive, ref } from 'vue'
export default {
    name: 'PayEditor',
    props: {
        showEditor: {
            type: Boolean,
            default: false
        },
        params: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    setup(props, context) {
        const { showEditor, params } = toRefs(props)
        const ruleFormRef = ref()
        const visible = computed({
            get: () =>  {
                return showEditor.value
            },
            set: val => {
                context.emit('update:showEditor', val)
            }
        })
        const state = reactive({
            form: {
                time: '',
                single: '',
                total: '',
                payTotal: '',
                unit: '分钟'
            },
            rules: {
                payTotal: [{ required: true, message: '请输入实付金币', trigger: 'blur' }]
            }
        })
        const close = () => {
            if (!ruleFormRef.value) return
            ruleFormRef.value.resetFields()
            context.emit('update:showEditor', false)
        }
        const confirm = () => {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validate((valid, fields) =>{
                if (valid) {
                    // TO DO 这里接接口, 将数据保存后发出一条金币的消息
                    context.emit('update:showEditor', false)
                } else {
                    console.log('error submit!', fields)
                }
            })
        }
        return {
            visible,
            close,
            confirm,
            ...toRefs(state),
            ruleFormRef
        }
    }
}
</script>
<style lang="scss" scoped>
    
</style>